<template>
  <div class="wrapper">
    <!-- <el-row class="queryBox">
      <el-col :span="24">
        <el-button
          v-if="$_permisson('/core/user/add')"
          icon="el-icon-plus"
          circle
          title="新建"
          @click="showCreate"
        />
        <el-button
          v-if="$_permisson('/core/user/exportUser')"
          icon="el-icon-printer"
          circle
          title="导出"
          @click="printer"
        />
        <el-button
          v-if="$_permisson('/core/user/importUser')"
          icon="el-icon-upload2"
          circle
          title="导入"
          @click="showImportBox"
        />
        <el-button
          v-if="$_permisson('/search')"
          icon="el-icon-search"
          circle
          title="搜索"
          @click="showFindBox"
        />
      </el-col>
    </el-row> -->
    <JTable
      :table-list="tableList"
      :config="JTableConfig"
    >
      <template slot="Actions" slot-scope="{row}">
        <el-button v-if="$_permisson('/core/user/resetPassword')" type="text" @click="handleActive(row,'more')">详情</el-button>
        <el-button v-if="$_permisson('/core/user/resetPassword')" type="text" @click="handleActive(row,'reset')">重置密码</el-button>
        <el-button v-if="$_permisson('/core/user/update')" type="text" @click="handleActive(row,'edit')">修改</el-button>
        <el-button v-if="$_permisson('/core/user/delete')" type="text" @click="handleActive(row,'del')">删除</el-button>
      </template>
      <template slot="activeBoxR">
        <el-button
          v-if="$_permisson('/core/user/add')"
          icon="el-icon-plus"
          circle
          title="新建"
          @click="showCreate"
        />
        <el-button
          v-if="$_permisson('/core/user/exportUser')"
          icon="el-icon-printer"
          circle
          title="导出"
          @click="printer"
        />
        <el-button
          v-if="$_permisson('/core/user/importUser')"
          icon="el-icon-upload2"
          circle
          title="导入"
          @click="showImportBox"
        />
        <el-button
          v-if="$_permisson('/search')"
          icon="el-icon-search"
          circle
          title="搜索"
          @click="showFindBox"
        />
      </template>
    </JTable>

    <el-dialog :title="dialog.title[dialog.active]" :visible.sync="dialog.dialogVisible" destroy-on-close>
      <UserCreate
        v-if="['userCreate','more','edit'].includes( dialog.active)"
        :user-id="currentId"
        :read="dialog.active=='more'"
        @handleBoxEvent="handleDialog"
      />
      <importPeople v-if="dialog.active==='importBox'" />
    </el-dialog>
    <el-drawer
      class="hiddenOutline"
      title="搜索"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleCloseDrawer"
    >
      <findBox @handleBoxEvent="handleFilter" />
    </el-drawer>
  </div>
</template>

<script>
import JTable from '@/components/JTable'
import pageBtn from '@/views/mixin/pageBtn'

import { list, remove, resetPassword, printUser } from '@/api/menber'
import UserCreate from './widget/UserCreate'
import importPeople from './importPeople'
import findBox from './widget/findBox'
export default {
  components: {
    findBox,
    UserCreate,
    importPeople,
    JTable
  },
  mixins: [pageBtn],
  props: {},
  data() {
    const listQuery = {
      total: 0,
      page: 1,
      size: 10,
      handleFilter: this.fetchData
    }
    const dialog = {
      dialogVisible: false,
      title: { userInfo: '用户信息', userCreate: '创建用户', edit: '修改资料', importBox: '用户导入', more: '查看详情' },
      active: ''
    }
    return {
      userList: [],
      multipleSelection: [], // 已选
      dialog,
      listQuery,
      drawer: false,
      listLoading: true,
      currentId: null,
      JTableConfig: {
        listLoading: this.listLoading,
        pagination: listQuery,
        thead: [
          {
            type: 'selection'
          },
          {
            type: 'index',
            label: '-',
            start: 1,
            width: 50
          },
          {
            prop: 'userName',
            label: '名称'
            // type: 'link',
            // options: {
            //   callback: (row) => {
            //     this.handleActive(row, 'more')
            //   },
            //   type: 'primary'
            // }
          },
          {
            prop: 'loginId',
            label: '登录ID'
          },
          {
            prop: '权限',
            label: 'roleIds'
          },
          {
            prop: '联系电话',
            label: 'telephone'
          },
          {
            prop: '',
            label: 'Actions',
            type: 'actions',
            width: '200',
            align: 'center',
            slot: true
          }
        ],
        search: ['idNo', 'loginId', 'nickName', 'orgId', 'telephone', 'userName', 'userType'],
        activeBox: {
          defaultBtn: false,
          bindDefaultEvent: this.showCreate
        }
      },
      cities: [{
        value: 'Beijing',
        label: '北京'
      }, {
        value: 'Shanghai',
        label: '上海'
      }, {
        value: 'Nanjing',
        label: '南京'
      }, {
        value: 'Chengdu',
        label: '成都'
      }, {
        value: 'Shenzhen',
        label: '深圳'
      }, {
        value: 'Guangzhou',
        label: '广州'
      }],
      value: ''
    }
  },
  computed: {
    tableList() {
      const origin = this.userList

      return origin
    },
    selectedUserItem() {
      const { currentId } = this
      if (currentId === null) return {}
      const result = this.userList.find(i => i.id === currentId)
      return result || {}
    }
  },
  watch: {},
  created() {
    this.fetchData()
  },
  mounted() {},
  methods: {
    showCreate() {
      const target = 'userCreate'
      this.showDialog(target)
    },
    fetchData(argm = {}) {
      this.listLoading = true
      const { page: pageNum = 1, size: pageSize = 10, ...param } = argm
      const params = { pageNum, pageSize, ...param }
      list(params).then(res => {
        const { /* code, */ data: { list = [], total = 0 }} = res
        this.userList = list
        this.listQuery.total = total
        this.listLoading = false
      })
    },
    handleActive(row, target) {
      const { id } = row
      this.currentId = id
      if (target === 'del') {
        this.reomveMenber(id)
        return
      }

      // let openTarget = 'userInfo'
      // if (target === 'edit') {
      //   openTarget = 'userUpdate'
      // }
      if (['more', 'edit'].includes(target)) { this.showDialog(target) }

      if (target === 'reset') {
        this.resetPassword(id)
      }
    },
    handleFilter(queryParams = {}) {
      const { listQuery } = this
      if (queryParams) {
        const newParams = { ...listQuery, ...queryParams, page: 1 }
        this.listQuery = newParams
      }
      this.fetchData(this.listQuery)
    },
    showDialog(target = 'userInfo') {
      this.dialog.dialogVisible = true
      this.dialog.active = target
    },
    handleDialog(emit) {
      this.dialog.dialogVisible = false
      this.currentId = null
      if (emit === 'created') {
        this.fetchData()
      }
    },
    reomveMenber(ids) {
      this.$confirm('此操作不可逆转, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(ids).then(res => {
          const { code, message } = res
          if (code === 200) {
            this.$message({
              message,
              type: 'success'
            })
            this.fetchData()
            return
          }
          this.$message.error(message)
        })
      }).catch(() => {
      })
    },
    showFindBox() {
      this.drawer = true
    },
    handleCloseDrawer() {
      this.drawer = false
    },
    printer() {
      // TODO: 参数待确认
      printUser().then(res => {
        console.log('导出')
      })
    },
    showImportBox() {
      const target = 'importBox'
      this.showDialog(target)
    },
    resetPassword(id) {
      this.$confirm('此操作不可逆转, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetPassword(id).then(res => {
          const { code, message } = res
          if (code === 200) {
            this.$message({
              message,
              type: 'success'
            })
            this.fetchData()
            return
          }
          this.$message.error(message)
        })
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
   padding: 0px;
   margin: 0px;
  .queryBox{
    padding: 0.5rem;
  }
  .textRight{
    text-align: right;
  }
}
</style>
